<template>
  <div>
    <Table height="440" border :columns="columnsReg" :data="dataReg">
      <template slot-scope="{ index, row }" slot="name">
        <span>{{ row.userVisitCard.username }}</span>
      </template>
      <template slot-scope="{ index, row }" slot="createTime">
        <span>{{ row.createTime }}</span>
      </template>
      <template slot-scope="{ index, row }" slot="site">
        <span>{{ row.expert.realName }}</span>
      </template>
      <template slot-scope="{ index, row }" slot="address">
        <span>{{ row.site.siteName }}</span>
      </template>
      <template slot-scope="{ index, row }" slot="status">
        <div>
          <span class="round" :class="formatStatus(row.status)"></span>
          <span>{{ textStatus(row.status) }}</span>
        </div>
      </template>
      <template slot-scope="{ index, row }" slot="action">
        <Button type="error" size="small" @click="toDetails(row)">查看</Button>
      </template>
    </Table>
    <div class="page">
      <Page
        :total="total"
        :page-size="param.rows"
        size="small"
        show-sizer
        show-total
        show-elevator
        @on-change="currentHandle"
        @on-page-size-change="sizeChange"
      />
    </div>
  </div>
</template>
<script>
import { getRegisterpage } from "@/api/yk_record";
export default {
  data() {
    return {
      columnsReg: [
        {
          title: "姓名",
          slot: "name",
          align: "center",
        },
        {
          title: "时间",
          key: "createTime",
          align: "center",
        },
        {
          title: "专家",
          slot: "site",
          align: "center",
        },
        {
          title: "场地",
          slot: "address",
          align: "center",
        },
        {
          title: "状态",
          slot: "status",
          minWidth: 100,
          align: "center",
        },
        {
          title: "操作",
          slot: "action",
          minWidth: 100,
          align: "center",
        },
      ],
      dataReg: [],
      total: 0,
      param: {
        // 请求参数
        page: 1,
        rows: 10,
      },
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // 跳转详情
    toDetails(row) {
      this.$router.push({
        path: "/myAppointDetails",
        query: {
          id: row.id,
          status: row.status,
        },
      });
    },
    getTableData() {
      getRegisterpage(this.param).then((res) => {
        if (res.code == "200") {
          this.dataReg = res.result.list;
          this.total = Number(res.result.total);
        } else {
          this.$Message.error(res.message || "获取失败!");
        }
      });
    },
    formatStatus(status) {
      let str = "";
      switch (status) {
        case 0:
          str = "orange";
          break;
        case 1:
          str = "red";
          break;
        case 2:
          str = "greenColor";
          break;
        case 3:
          str = "gray";
          break;
        case 4:
          str = "cancel";
          break;
        case 5:
          str = "Over";
          break;
        case 6:
          str = "gray";
          break;
        default:
      }
      return str;
    },
    textStatus(status) {
      let str = "";
      switch (status) {
        case 0:
          str = "待付款";
          break;
        case 1:
          str = "待会诊";
          break;
        case 2:
          str = "会诊中";
          break;
        case 3:
          str = "已完成";
          break;
        case 4:
          str = "用户取消";
          break;
        case 5:
          str = "过号";
          break;
        case 6:
          str = "专家取消";
          break;
        default:
      }
      return str;
    },
    goPage(item, index) {
      this.activeRoute = item.routeName;
      this.current = index;
    },
    currentHandle(current) {
      this.param.page = current;
      this.getTableData();
    },
    sizeChange(size) {
      this.param.rows = size;
      this.getTableData();
    },
  },
};
</script>
<style lang="scss" scoped>
  .round {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background: #fff;
    margin-right: 5px;
  }
  .page {
    width: 100%;
    text-align: right;
    margin-top: calc(40 / 1920 * 100vw);
  }
  // 状态区分颜色
  .orange {
    background: #ff2f17 !important;
  }
  .red {
    background: #fdcd10 !important;
  }
  .inConsu {
    background: #1b6ced !important;
  }
  .greenColor {
    background: #ecff16 !important;
  }
  .gray{
    background: #3ced1c !important;
  }
  .cancel {
    background: #c1360f !important;
  }
  .Over {
    background: #22d4d8 !important;
  }
  .complete {
    background: #c1360f !important;
  }
  .btn {
    cursor: pointer;
    color: #ffb445;
  }
  .round {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background: #fff;
    margin-right: 5px;
  }
.round {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #fff;
  margin-right: 5px;
}
.page {
  width: 100%;
  text-align: right;
  margin-top: calc(40 / 1920 * 100vw);
}
// 状态区分颜色
.orange {
  background: #ff2f17 !important;
}
.red {
  background: #fdcd10 !important;
}
.inConsu {
  background: #1b6ced !important;
}
.greenColor {
  background: #ecff16 !important;
}
.gray {
  background: #3ced1c !important;
}
.cancel {
  background: #c1360f !important;
}
.Over {
  background: #22d4d8 !important;
}
.complete {
  background: #c1360f !important;
}
.round {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #fff;
  margin-right: 5px;
}
</style>
